/* eslint-disable */
import React from 'react';
import styles from './genenalSearch.less'
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

import Paper from '@material-ui/core/Paper';
import InputBase from '@material-ui/core/InputBase';
import Divider from '@material-ui/core/Divider';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import SearchIcon from '@material-ui/icons/Search';
import DirectionsIcon from '@material-ui/icons/Directions';

import { Link } from 'dva/router'


const useStyles = makeStyles((theme) => ({
	root: {
		padding: '2px 4px',
		display: 'flex',
		alignItems: 'center',
		width: 400,
	},
	input: {
		marginLeft: theme.spacing(1),
		flex: 1,
	},
	iconButton: {
		padding: 10,
	},
	divider: {
		height: 28,
		margin: 4,
	},
}));

function CustomizedInputBase() {
	const classes = useStyles();

	return (
		<Paper component="form" className={classes.root}>
			<IconButton className={classes.iconButton} aria-label="menu">
				{/* <MenuIcon /> */}
			</IconButton>
			<InputBase
				className={classes.input}
				placeholder="输入名称关键字搜索"
				inputProps={{ 'aria-label': 'search key word' }}
			/>
		</Paper>
	);
}


export default class genenalSearch extends React.Component {

	render() {

		return (
			<div className={styles.main}>
				<span>无废城市综合查询服务</span>
				<CustomizedInputBase />
				<div >
					<Button variant="contained">
						<Link style={{
							color: 'black'
						}} to="/App/articleSearch">
							搜索
						</Link>
					</Button>
					<Button variant="contained" color="primary">
						<Link style={{
							color: 'black'
						}} to="/App/advancedSearch">
							高级搜索
						</Link>
					</Button>
				</div>
			</div>
		);
	}
}
